<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%-- <%@ taglib uri="http://code.google.com/p/jcaptcha4struts2/taglib/2.0" prefix="jcaptcha" %> --%>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="/djzx/images/tit.ico">
<link href="/djzx/css/dragValid/drag.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/djzx/js/jquery-1.8.1.min.js"></script>
<title>登录页面</title>
<style>
* {
	margin: 0;
	padding: 0;
}

html,body{
	width: 100%; 
	height: 100%;
	text-align:center;
	overflow: hidden;
}  

.top{
	text-align: center;
    height: 100px;
	position: absolute;
	top: 0;
	width: 100%;
	background: #ff0f10;
}

.middle{
	text-algin: center;
	height: 480px; 
	width: 460px;
	margin: 100px auto; 
}

.login{
	text-algin: center;
	position: absolute;
	height: 480px; 
	width: 460px;
	padding-top: 200px;  
	background: url(/djzx/images/login_middle.png) no-repeat;
}

.iB label {
	color: #5c7fb1;
	font-size: 12px;
	font-weight: 700;
}

.iB input {
	border: 1px solid #6a8cb9;
	width: 120px;
	padding: 3px 5px;
}

.iB button {
	width: 60px;
	height: 20px;
	background: #cee8f5;
	border: 1px solid #b8d8ed;
	letter-spacing: 5px;
}

/* .valid{
	margin-left: 130px;
} */

.footer{
	text-align: center;
    height: 38px;
	/* position: absolute; */
	position: fixed;
	bottom: 0;
	width: 100%;
	background: url(/djzx/images/login_foot.png);
}

/*check-code*/
.checkcode{
	margin-top: 10px;
	width: 182px;
	height: 30px;
	border: 1px solid #008cff;
	border-radius: 3px;
	background: #fff;
	margin-left: 139px;
}
.checkcode input{
	float: left;
	text-align: center;
	width: 85px;
	height: 28px;
	padding: 1px;
	color: #000;
	border: none;
	list-style:none;
	text-decoration: none;
}
.checkcode canvas{
	float: right;
	width: 85px;
	height: 28px;
	padding: 1px;
}
</style>
<script type="text/javascript" src="/djzx/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
if (window != top){
	top.location.href = location.href; 
}
window.onload=function(){
	var flag = $('#flag').val();
	if(flag =="loginNO"){
		alert("用户名或密码不正确");
	}
}
function checkForm(){
	var name = $.trim($('#name').val());
	var pwd = $.trim($('#pwd').val());
	if(name==""){
		alert("用户名不能为空");
		return false;
	}
	if(pwd==""){
		alert("密码不能为空");
		return false;
	}
	// 检查验证码是否正确
	var captchaFlag = validate();
	if(!captchaFlag){
		alert("验证码错误");
		return false;
	}
	
	return true;
}

/*-----------------------------------------------------------------------------
* @Description: 验证码 
* @author: 	xuyihong(xuyihong@163.com)
* @date		2015.09.24
* ---------------------------------------------------------------------------*/
function showCheck(a){/* 显示验证码图片 */
	var c = document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
	ctx.clearRect(0,0,1000,1000);
	ctx.font = "70px Arial";
	ctx.fillText(a,0,100);
}

var code ; //在全局 定义验证码      
function createCode(){       
    code = "";      
    var codeLength = 4;//验证码的长度
    var selectChar = new Array(1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','j','k','l','m','n','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');      
          
    for(var i=0;i<codeLength;i++) {
    	var charIndex = Math.floor(Math.random()*60);
    	code += selectChar[charIndex];
    }      
    if(code.length != codeLength){      
    	createCode();      
    }
    showCheck(code);
}      
// 检查验证码正确性
function validate () {
    var inputCode = document.getElementById("J_codetext").value.toUpperCase();
    var codeToUp = code.toUpperCase();
    if(inputCode.length <= 0) {
      document.getElementById("J_codetext").setAttribute("placeholder","输入验证码");
      createCode();
      return false;
    }
    else if(inputCode != codeToUp ){
      document.getElementById("J_codetext").value="";
      document.getElementById("J_codetext").setAttribute("placeholder","错误");
      createCode();
      return false;
    }
    else {
      //window.open(document.getElementById("J_down").getAttribute("data-link"));
      //document.getElementById("J_codetext").value="";
      //createCode();
      return true;
    }
}

// download
$(document).ready(function(){
  createCode();
})
</script>
</head>
<body>
	<!-- top start -->
	<div class="top">
		<img alt="banner" src="/djzx/images/login_banner.png">
	</div>
	<!-- top end -->
	<!-- middle start -->
	<div class="middle">
	<form id="form1" method="post" action="/djzx/UserAction!login.action" onsubmit="return checkForm()">
		<div class="login">
			<div class="iB">
				<input type="hidden" id="flag" value="${flag}"/>
				<label>用户名 </label> <input type="text" name="username" id="name"/>
			</div>
			<br />
			<div class="iB">
				<label>密&nbsp;码 </label> <input type="password" name="password" id="pwd"/>
			</div>
			<br />
			<!-- <div class="iB">
				<div id="drag" class="valid"></div>
			</div> -->
			<div class="checkcode">
				<input type="text" id="J_codetext" placeholder="输入验证码" maxlength="4">
				<canvas class="J_codeimg" id="myCanvas" onclick="createCode()">
					Your browser does not support the canvas element.
				</canvas>
			</div>
			<br />
			<div class="inputBox">
				<div class="iB">
					<button type="submit">登录</button>
				</div>
			</div>
		</div>
	</form>
	</div>
	<!-- middle end -->
	<!-- footer start -->
	<div class="footer"></div>
	<!-- footer end -->
	
<!-- <script type="text/javascript" src="/djzx/js/dragValid/drag.js"></script>
<script type="text/javascript">
$('#drag').drag(); 
</script> -->
</body>
</html>
